<script setup lang="ts">
import {useRouter} from 'vue-router'
const router = useRouter()
function logout(){
  localStorage.removeItem("isAuthenticated");
  router.push("/login");
}

</script>

<template>
  <el-menu
    class="el-menu-header"
    mode="horizontal"
    :ellipsis="false">
    <div class="center" @click="toBase">
      <el-image class="icon" src="../../public/logo2.png"></el-image>
      <span class="logo">wind chime</span>
    </div>
    <el-dropdown class="avatar">
      <el-avatar> user</el-avatar>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item ><el-icon><Edit /></el-icon> 修改信息</el-dropdown-item>
          <el-dropdown-item ><el-icon><Lock /></el-icon> 修改密码</el-dropdown-item>
          <el-dropdown-item @click="logout"><el-icon><SwitchButton /></el-icon> 退出</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </el-menu>

</template>

<style scoped>
.el-menu-header{
  display: flex;
  align-items: center;    /* 垂直居中 */
  justify-content: space-between; /* 子元素之间的间距 */
}
.el-dropdown.avatar{
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;    /* 垂直居中 */
}
.icon{
  height: 75%;
  width: 6%;
}
.logo {
  font-weight: bold; /* 加粗 */
  font-size: 20px; /* 加大 */
  font-style: italic; /* 斜体 */
}
.logo:hover{
  cursor:default;
}
.center{
  display: flex;
  align-items: center;    /* 垂直居中 */
}
</style>